import { useState } from 'react'
import './index.css'
import _ from 'lodash'
import classNames from 'classnames'
import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs'
import { useRef } from 'react'


// 评论列表数据
const list = [
  {
    content: '测试评论',
    ctime: '08-19 22:20',
    like: 99,
    rpid: 3, // 评论id
    user: {
      uid: '2139211',
      avatar: 'https://img2.baidu.com/it/u=4266934560,3233272326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=867',
      uname: 'tom3'
    }
  },
  {
    content: '测试评论',
    ctime: '04-19 22:20',
    like: 149,
    rpid: 2, // 评论id
    user: {
      uid: '2139222',
      avatar: 'https://img0.baidu.com/it/u=2653686457,2201625642&fm=253&fmt=auto&app=138&f=JPEG?w=665&h=665',
      uname: 'tom2'
    }
  },
  {
    content: '测试评论',
    ctime: '11-19 22:20',
    like: 59,
    rpid: 1, // 评论id
    user: {
      uid: '300123',
      avatar: 'https://img0.baidu.com/it/u=1476361851,2078976362&fm=253&app=138&f=JPEG?w=665&h=664',
      uname: 'tom1'
    }
  },
]

const user = {
  uid: '300123',
  avatar:'https://p1.itc.cn/images01/20230509/96060e624b464829bd777b7351842e40.jpeg',
  uname: 'tom'
}

const tabs = [
  {
    type: 'hot',
    text: '最热'
  },
  {
    type: 'time',
    text: '最新'
  }
]



function App() {
  // 使用useSate维护list
  const [commentList, setCommentList] = useState(_.orderBy(list, 'like', 'desc'))

  // 删除
  const handlerDel = (id) => {
    const arr = commentList.filter(item => item.rpid !== id)
    setCommentList(arr)
  }

  // 修改tab
  const [type, setType] = useState('hot')
  const handlerTabChange = (type) => {
    setType(type)
    // 基于列表的排序 lodash
    if(type === 'hot') {
      setCommentList(_.orderBy(commentList, 'like', 'desc'))
    } else {
      setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
    }
  }

  // 发表评论
  const [content, setContent ] = useState('')
  const textRef = useRef(null)
  const handlerPublish = () => {
    setCommentList([
      ...commentList,
      {
        content: content,
        ctime: dayjs(new Date()).format('MM-DD hh:mm'),
        like: 59,
        rpid: uuidV4(), // 评论id
        user: {
          uid: '300123',
          avatar: 'https://img0.baidu.com/it/u=1476361851,2078976362&fm=253&app=138&f=JPEG?w=665&h=664',
          uname: 'tom1'
        }
      },
    ])

    // 清空内容
    setContent('')
    // 重新聚焦
    textRef.current.focus()
  }


  return (
    <div>
      <div>
        <textarea ref={textRef} value={content} onChange={(e) => setContent(e.target.value)}></textarea>
        <button onClick={handlerPublish}>添加评论</button>
      </div>
      <div className="type">
        {tabs.map(item => (
          <span 
            onClick={() => handlerTabChange(item.type)} 
            style={{marginRight:'10px'}} 
            // className={`tab ${type === item.type && 'active'} `}
            className={classNames('tab', {active: type === item.type})}
            key={item.type}
          >
            {item.text}
           </span>
        ))}
      </div>
      <div className="reply-list">
        {commentList.map(item => (
          <div className="reply-item" key={item.rpid}>
            <div className='avatar'>
              头像:
              <img style={{width:'80px',height:'80px'}} src={item.user.avatar} alt="" />
            </div>
            <div className="name">{item.user.uname}</div>
            <div className="content">{item.content}</div>
            <div className="ctime">{item.ctime}</div>
            <button>点赞数:{item.like}</button>
            {
              user.uid === item.user.uid && 
              <button onClick={() => handlerDel(item.rpid)}>删除</button>
            }
          </div>
        ))}
        
      </div>
    </div>
  )
}   

export default App
